<template>
	<view>
		<kapai ref="kapai" :card="card" :extractNum="extractNum" @success="success">
		</kapai>
		<view class="" style="width: 100%;">
			<button @click="playStart" style="background: #ca635e;width: 35%;color: #fff;">洗牌</button>
		</view>
		<view class="" v-if="content">
			<view class="infos">
				<view class="title">
					<text class="shu"></text>
					<span class="ti">牌面结果</span>
				</view>
				<view class="result" style="font-weight: 800;">
					{{title}}
				</view>
			</view>
			<view class="infos">
				<view class="title">
					<text class="shu"></text>
					<span class="ti">牌面信息</span>
				</view>
				<view class="result">
					<rich-text :nodes="content"></rich-text>
				</view>
			</view>
		</view>
		<view class="" v-else style="margin-top: 20px;line-height: 20px;margin: 15px;text-indent: 2em;">
			<p>雷诺曼是一款占卜纸牌，是法国知名占卜师Marie-Anne
				Lenormand的姓氏命名的一种调剂生活浓度的占卜工具。而雷诺曼夫人本人是拿破仑时期法国宫廷御用占卜师，她成功的预言了拿破仑从一个普通人登基成王，再又王坠落神坛的全部过程；可以占卜事业，工作，爱情，学业等等等等，测日运，有预知未来的能力！她是能做到的，并且快！狠！准！（仅供娱乐，切勿迷信）
			</p>
		</view>
		<view class="yl">
			<text>仅供娱乐！请勿当真</text>
		</view>
	</view>
</template>

<script>
	import kapai from "../../components/xzl-pai/xzl-pai.vue"

	export default {

		data() {
			return {
				extractNum: 3,
				content: null,
				title: '',
				card: [{
						val: '',
						status: 0
					},
					{
						val: '',
						status: 0
					},
					{
						val: '',
						status: 0
					},
					{
						val: '',
						status: 0
					},
					{
						val: '',
						status: 0
					},
					{
						val: '',
						status: 0
					},
					{
						val: '',
						status: 0
					},
					{
						val: '',
						status: 0
					},
					{
						val: '',
						status: 0
					},

				],
			}
		},
		components: {
			kapai
		},
		onShareAppMessage(res) {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: "选一张牌，有没有被惊讶到",
				imageUrl: "https://www.leedong.top/img/suangua1.jpg",


			}

		},
		//2.分享到朋友圈
		onShareTimeline() {

			return {
				title: "选一张牌，有没有被惊讶到",
				imageUrl: "https://www.leedong.top/img/suangua1.jpg",


			}
		},
		methods: {
			playStart() {

				this.card.map(i => {
					i.is_move = true //执行洗牌动画
				})
				this.$nextTick(() => {
					this.$refs.kapai.start(this.card, (end) => {
						console.log('洗牌结束了');
						this.getData()
					})
				})
			},
			getData() {
				this.$api.choupai({}).then((res) => {
					console.log(res)
					this.card = res.rows;
				})
			},

			success(e) {
				const {
					item,
					index
				} = e.detail;
				var obj = this.card[index];
				obj.status = 1;
				this.card[index] = obj;
				setTimeout(() => {
					this.title = obj.val;
					this.content = obj.content.replaceAll("。", "<br>")
				}, 1000)



			},
		}


	}
</script>

<style lang="scss">
	.infos {
		margin-top: 30rpx;

		.title {
			display: flex;
			padding: 20rpx;

			.shu {

				width: 5px;
				height: 20px;
				background-color: #e6a84b;
				border-radius: $uni-border-radius-base;
			}

			.ti {
				padding-left: 15rpx;
			}
		}

		.result {
			margin: 10px 20px;
			user-select: all;
		}
	}
</style>